<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>使用栅格系统</title>

        <!-- 使用 link 链接外部样式，必须指定 rel 为 stylesheet  ，使用 href 指定样式文件名称 -->
        <link rel="stylesheet" href="cells.css" >

        <!-- 在 style 元素内部指定当前页面上所特有的样式 -->
        <style type="text/css">
            body { margin : 0 ;  padding: 0 ; }
            .wrapper { width: 80% ; margin: 25px auto ; border: 1px solid blue ; }
            .odd { height: 50px ; background-color: #efefef; }
            .even { height: 50px ; background-color: #fffdab; }
        </style>
    </head>
    <body>

        <div class="row wrapper">
            <!-- 只有一个 div 放在 wrapper 内部的最右边，并且其宽度为 25% -->
            <div class="cells-12-3 offset-12-9 odd" ></div>
        </div>

        <div class="row wrapper">
            <!-- 有两个 div 放在 wrapper 内部的最右边，并且两个 div 各占 "两格" -->
            <div class="cells-12-2 offset-12-8 odd" ></div>
            <div class="cells-12-2 even" ></div>
        </div>

        <div class="row wrapper">
            <!-- 有两个 div 放在 wrapper 内部 -->
            <div class="cells-12-2 odd" ></div> <!-- 一个在最左边，并且其宽度为  "两格" -->
            <!-- 另外一个宽度也是 "两格"，但是在最右边-->
            <div class="cells-12-2 offset-12-8 even" ></div>
        </div>

    </body>
</html>